<template>
	<!--自定义顶部导航栏-->
	<view class="nav_bar">
		<view class="top_height">
		</view>
		<view class="nav_content">
			<image src="../../static/智能小采.png" mode="widthFix"></image>
			<view class="nav_text">
				<text>小艾翻译助手</text>
				<text>专属你的ai助手，帮助你获取知识</text>
			</view>
		</view>
	</view>
	<view :style="{height:MenuButton().StyHET}"></view>
	<!-- 进入页面的默认文本 -->
	<view class="Sent_information backdrop your-element c_text" v-if="tujian">{{ greetSb }}</view>
	<!--需语言-->
	<view class="Yuyan Sent_information backdrop your-element " v-if="gen">
		<view class="quxiao"><image src="../../static/取消.png" @click="quxiao()"></image></view>
		<view v-for=" (v,i) in yuyan_text" class="Sent_information backdrop your-element "><text :class="Index_yuyan===i?'yu_text':''" @click="yu_Text_a(v.tu,v.fon,i)">{{ v.con }}</text></view>
	</view>
	<!--用户和ai的对话区域-->
	<!--用户：-->
	<view class="user_backdrop" v-if="Use_True">
		<view><image src="../../static/头像.jpg" mode="widthFix"></image></view>
		<view class="user_backdrop_a">{{ text }}</view>
	</view>
	<!--ai：-->
<view class="Sent_information backdrop Ai_Img_flax" v-if="Use_True">
			
			<!--ai回复前显示的转圈圈效果-->
			<view class="loading" v-if="Chat_text_True">
				<view class="loader"></view>
				<view>小艾翻译助手正在翻译中</view>
			</view>
			<view class="ai_content">
				<text>{{ Chat_text }}</text>
				<image src="../../static/复制.png" mode="widthFix"></image>
			</view>
		</view>
	<!--低部输入框-->
	<view class="Input_field">
		<!--清空按钮-->
		<view class="Input_ican1"><image src="../../static/更多.png" mode="aspectFit" @click="gengduo()"></image></view>
		<!--输入框-->
		<input 
		placeholder="你可以问我任何问题?"
		maxlength="-1" 
		cursor-spacing="40"
		confirm-type="send"
		auto-blur
		v-model="inputContent"
		@confirm="sendMessage"
		>
		<!--发送按钮-->
		<view class="Input_ican1"><image src="../../static/发送.png" mode="aspectFit" @click="sendMessage"></image></view>
	</view>
</template>

<script setup>
	import {ref,onMounted} from "vue"
	import {MenuButton} from "@/api/MenuButton.js"
	// 进入页面的默认提示
	const greetSb = ref('本小程序专注于为用户提供简单、高效的文字翻译功能。无论您是需要进行学术研究，还是日常工作生活中遇到语言障碍，都可以通过我们的小程序得到帮助。我们支持多种主流语种之间的互译，并且会不断更新和优化以满足您的需求')
	const greetSb_list = ref([
		"给我一份关于数字经济的毕业论文大纲",
		"如何使用python读取excel文件内容",
		"用python写一个爬虫图片代码",
		"我要去新疆旅游，有什么地方推荐吗",
		"帮我推荐几款流行的家装风格"
	]) 
	const yuyan_text = ref([
		{
			con : "中文",
			tu:"zh",
			fon:"auto"
		},
		{
			con:"维吾尔",
			fon:"auto",
			tu:"uy"
		},
		{
			con : "中文(繁体)",
			fon:"auto",
			tu:"cht"
		},
		{
			con : "中文(文言文)",
			fon:"auto",
			tu:"wyw"
		},
		{
			con : "俄语",
			fon:"auto",
			tu:"ru"
		},{
			con : "英语",
			fon : "auto",
			tu:"en"
		},{
			con:"中文->文言文",
			fon:"zh",
			tu:"wyw"
		},{
			con:"文言文->中文",
			fon:"wyw",
			tu:"zh"
		}
	])
	const Index_yuyan = ref(0)
	// 用户输入的内容
	const text = ref('')
	var inputContent = ref('')
	const Chat_text_True = ref(true);
	const Chat_text = ref("")
	const Use_True = ref(false)
	const history = ref([])
	const tujian = ref(true)
	const gen = ref(false)
	var Yuyan_fon = ref("en")
	var Yuyan_tu = ref("zh")
	// const Ch
	// 选语言
	const gengduo = ()=>{
		gen.value = true
	}
	
	const quxiao = ()=>{
		gen.value = false
	}
	
	const yu_Text_a = (tu,fon,i)=>{
		Yuyan_fon.value = fon
		Yuyan_tu.value = tu
		Index_yuyan.value = i
		// gen.value = false
	}
	// 开始发送消息
	const sendMessage = ()=>{
		text.value = inputContent
		Use_True.value = true
		tujian.value = false
		// 发送请求
		uni.request({
		    url: 'http://127.0.0.1:5000/api/Tran', // Flask Web应用的URL
		    method: 'POST', // 请求方法
		    data: { // 请求数据
		        content: inputContent ,// 从输入框获取的内容
				from_lang:Yuyan_fon,
				tu_lang:Yuyan_tu
		    },
		    success: (res) => {
		        console.log('发送成功，返回数据：', res.data); // 处理返回的数据
				console.log(res.data['message'])
				// const js_text = JSON.stringify(res.data['message'])
				// Chat_text_True = false
				Chat_text_True.value = false;
				const Se = {"os":inputContent.value,"chat":res.data["message"]}
				console.log(Se)
				// history.value.push(Se)
				Chat_text.value = res.data["message"]
		    },
		    fail: (err) => {
		        console.log('发送失败，错误信息：', err);
		    }
		});
	}
	
	
</script>

<style>
	page{
		background-color: #f6f8fe;
	}
	.yu_text{
		color: #9fbcfa;
	}
	.quxiao{
		width: 30rpx;
		height: 30rpx;

	}
	.quxiao image{
		width: 100%;
		height: 100%;
	}
	.Yuyan{
		width: 150px;
		height: 70vh;
		position: fixed;
		top: 100px;
		right: 0;
		background-color: #f6f8fe;
		border-radius: 15px;
		border: 1rpx solid #000 ;
	}
	.c_text{
		text-indent: 52upx;
	}
	.nav_content{
		width:100%;
		height: 100upx;
	}
	.nav_content image{
		width: 100upx;
		height: 100upx;
	}
	.nav_bar{
		height: v-bind("MenuButton().seViewHeight");
		position: fixed;
		/* top: v-bind('MenuButton().se'); */
		top: 0;
		left: 0;
		right: 0;
		background: linear-gradient(to bottom,#9fbcfa,#f6f8fe);
		z-index: 10;
	}
	.top_height{
		height: v-bind("MenuButton().top");
	}
	
	.nav_content{
		display: flex;
		align-items: center;
	}
	.nav_text{
		display: flex;
		flex-direction: column;
	}
	.nav_text text:nth-child(1){
		font-size: 25upx;
		font-weight: bold;
	}
	.nav_text text:nth-child(2){
		font-size: 20upx;
		color: #798189;
		line-height: 20px;
	}
	@keyframes fadeInFromTop{
		0%{
			opacity: 0;
			transform: translateY(30px);
		}
		100%{
			opacity: 1;
			transform: translateY(0);
		}
	}
	.your-element{
		animation-name: fadeInFromTop;
		animation-duration: 0.7s;
		animation-timing-function: ease-in;
		animation-fill-mode: forwards;
	}
	.backdrop{
		background-color: #fefefe;
	}
	.widthAuto{
		width: auto;
	}
	.Sent_information{
		padding: 10rpx;
		margin: 20rpx;
		line-height: 1.5;
		border-radius: 10rpx;
		font-size: 29rpx;
	}
	.problem_top text{
		font-weight: bold;
	}
	.nav_img text{
		/* line-height: 100px; */
		position: relative;
		top: -2px;
	}
	.problem_top image{
		width: 45rpx;
		display: block;
		margin-right: 10rpx;
	}
	.Default_problem{
		border: 1rpx solid #e8f0fc ;
		border-radius: 40rpx;
		padding: 15rpx 0;
		text-align: center;
		margin: 20rpx 0;
		font-weight: bold;
	}
	.user_backdrop{
		color: #555d92;
		display: flex;
		margin: 20rpx;
		padding: 20rpx 0rpx;
	}
	.user_backdrop image{
		width: 80rpx;
		display: block;
		border-radius: 50%;
	}
	.user_backdrop view:nth-child(1){
		height: 50rpx;
		margin-right: 10rpx;
		display: flex;
		align-items: center;
	}
	/*用户发送信息的文本*/
	.user_backdrop view:nth-child(2){
		line-height: 1.5;
		align-self: center;
	}
	
	.loading{
		display: flex;
		align-items: center;
	}
	/*转圈圈效果*/
	@keyframes spin{
		0%{
			transform: rotate(0deg);
		}
		100%{
			transform: rotate(360deg);
		}
	}
	.loader{
		border: 5rpx solid #f3f3f3;
		border-top: 5rpx solid #3498db;
		border-radius: 50%;
		width: 30rpx;
		height: 30rpx;
		animation: spin 1s linear infinite;
		margin-right: 10rpx;
	}
	/*ai回复的内容区域样式*/
	.ai_content{
		display: flex;
		flex-direction: column;
	}
	.ai_content text{
		border-bottom: 1px solid #f3f3f3;
		padding-bottom: 10rpx;
	}
	.ai_content image{
		width: 29rpx;
		align-self: flex-end;
		margin-top: 10rpx;
		margin-right: 10rpx;
	}
	.Input_field{
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		border-top: 1px solid #eee;
		padding-top: 10rpx;
		padding-bottom: 30rpx;
		background-color: #f6f8fe;
	}
	.Input_ican1 image{
		width: 50rpx;
		height: 50rpx;
	}
	/* 固定在底部的输入框input样式 */
		.Input_field input{
			width: 100%;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
			
		}
		/* 固定在底部的输入框左右两边清空和发送样式 */
		.Input_field view{
			height: 80rpx;
			width: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 10rpx;
		}
		.Input_field image{
			height: 50rpx;
			width: 50rpx;
			display: block;
		}


</style>
